<template>
  <div class="slot-view">
    <!-- 子组件通过slot渲染出来的内容,数据受到子组件控制,但是结构
    是在父组件组装的 -->
    <!-- 作用域插槽就是你可以给插槽标签传递属性.在父作用域中通过v-slot:得到的是
    一个属性的对象集合,这样我们就能够让父级的插槽内容访问子组件中才有的数据 -->
    <slot name="headerTop" :likeSports="likeSports" :likeFoodaaaa="likeFood"></slot>
    <div>组件固定内容</div>
    <!-- 出口 -->
    <slot name="default"></slot>
  </div>
</template>

<script>

export default {
  components: {},
  props: {

  },
  data () {
    return {
      likeSports: [{ name: '篮球' }, { name: '足球' }, { name: '排球' }],
      likeFood: [{ name: '红烧肉' }, { name: '鱼香肉丝' }, { name: '红烧排骨' }]
    }
  },
  computed: {},
  methods: {

  },
  created () {

  },
  mounted () {

  },
}
</script>
<style scoped>
.slot-view {
  border: 1px solid red;
}
</style>